React 流式传输：用于优化用户体验的渐进式服务器端渲染

在 Web 开发领域，提供快速和响应式的用户体验至关重要。用户期望网站能够快速加载并在没有延迟的情况下进行交互。React 是一个用于构建用户界面的流行 JavaScript 库，它提供了一种称为 流式服务器端渲染 (SSR) 的强大技术来解决这一挑战。 本文深入探讨了 React 流式 SSR 的概念，探索了其优势、实现方式以及对网站性能和用户体验的影响。

什么是服务器端渲染 (SSR)？

传统的客户端渲染 (CSR) 涉及浏览器下载 HTML、JavaScript 和 CSS 文件，然后在客户端渲染内容。虽然具有灵活性，但这种方法可能导致初始渲染延迟，因为用户必须等待所有资源下载并执行 JavaScript 才能看到任何内容。 另一方面，SSR 在服务器上渲染 React 组件，并将完全渲染的 HTML 发送到客户端。 这导致更快的初始加载时间，因为浏览器接收到可以立即显示的完全形成的 HTML。

传统 SSR 的局限性

虽然传统的 SSR 提供了比 CSR 显着的改进，但它也有其自身的局限性。在传统的 SSR 中，需要在服务器上渲染整个应用程序，然后才能将任何 HTML 发送到客户端。 这可能成为一个瓶颈，特别是对于具有多个组件和数据依赖性的复杂应用程序。 首字节时间 (TTFB) 可能会很高，导致用户感觉到缓慢。

进入 React 流式 SSR：一种渐进式方法

React 流式 SSR 通过采用渐进式方法克服了传统 SSR 的局限性。 流式 SSR 没有等待在服务器上渲染整个应用程序，而是将渲染过程分解成更小的块，并在它们可用时将这些块流式传输到客户端。 这允许浏览器更早地开始显示内容，从而提高感知的性能并减少 TTFB。 可以将其想象成一家餐厅分阶段准备您的膳食：首先上开胃菜，然后是主菜，最后是甜点，而不是等待整个膳食一次性准备好。

React 流式 SSR 的优势

React 流式 SSR 为网站性能和用户体验提供了许多好处：

• 更快的初始加载时间：通过将 HTML 块流式传输到客户端，浏览器可以更早地开始显示内容，从而实现更快的感知加载时间和改进的用户参与度。
• 改进的首字节时间 (TTFB)：流式 SSR 通过在初始 HTML 块准备就绪后立即发送它来减少 TTFB，而不是等待渲染整个应用程序。
• 增强的用户体验：更快的初始加载时间带来更好的用户体验，因为用户不会等待内容出现。
• 更好的 SEO：搜索引擎可以更有效地抓取和索引内容，因为 HTML 在服务器上随时可用。
• 渐进式水合：流式 SSR 启用渐进式水合，客户端 React 代码在 HTML 块流式传输时逐渐附加事件侦听器并使应用程序具有交互性。
• 改进的资源利用率：通过将渲染过程分解成更小的块，流式 SSR 可以提高服务器上的资源利用率。

React 流式 SSR 的工作原理

React 流式 SSR 利用 ReactDOMServer.renderToPipeableStream() API 将 HTML 块流式传输到客户端。 该 API 返回一个可读流，该流可以被管道传输到服务器的响应对象。 以下是其工作原理的简化说明：

1. 服务器接收对页面的请求。
2. 服务器调用 ReactDOMServer.renderToPipeableStream() 以将 React 应用程序渲染到流中。
3. 当 React 组件被渲染时，流开始发出 HTML 块。
4. 服务器将流通过管道传输到响应对象，将 HTML 块发送到客户端。
5. 浏览器接收 HTML 块并开始渐进式显示它们。
6. 一旦接收到所有 HTML 块，浏览器就会对 React 应用程序进行水合，使其具有交互性。

实现 React 流式 SSR

要实现 React 流式 SSR，您需要一个 Node.js 服务器和一个 React 应用程序。 这是一个分步指南：

1. 设置 Node.js 服务器：使用 Express 或 Koa 等框架创建一个 Node.js 服务器。
2. 安装 React 和 ReactDOMServer：安装 react 和 react-dom 包。
3. 创建 React 应用程序：使用您希望在服务器上渲染的组件创建一个 React 应用程序。
4. 使用 ReactDOMServer.renderToPipeableStream()：在您的服务器代码中，使用 ReactDOMServer.renderToPipeableStream() API 将您的 React 应用程序渲染到流中。
5. 将流通过管道传输到响应对象：将流通过管道传输到服务器的响应对象，以将 HTML 块发送到客户端。
6. 处理错误：实现错误处理以捕获渲染过程中可能发生的任何错误。
7. 添加用于水合的脚本标签：在 HTML 中包含一个脚本标签，以在客户端对 React 应用程序进行水合。

代码片段示例（服务器端）：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // 您的 React 组件

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // 客户端入口点
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
抱歉，出了一些问题
');
    }
  });

  setTimeout(abort, 10000); // 可选：超时以防止无限期挂起
});

app.use(express.static('public')); // 提供静态资源

app.listen(port, () => {
  console.log(`服务器正在 http://localhost:${port} 监听`);
});

代码片段示例（客户端 - `client.js`）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

React 应用程序组件示例 (App.js)：

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("数据加载成功!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // 模拟加载延迟
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
欢迎使用流式 SSR!
      
这是 React 流式 SSR 的演示。
      正在加载...
}>